<link rel="import" href="../../bower/polymer/polymer.html">
<link rel='import' href='contact.html'>

<polymer-element name='uproxy-roster-group'
    attributes='contacts, groupTitle, mode'>

  <template>
    <style>
    :host {
      text-align: start;
    }
    .header {
      font-size: 13px;
      margin: 24px 24px 6px 24px;
      color: rgba(0,0,0,0.34);
      font-weight: 500;
    }
    </style>

    <div class='header'
        hidden?='{{ contacts.length === 0 }}'>
        {{ groupTitle }}
    </div>

    <template repeat='{{ c in sortedContacts }}' vertical layout>
      <uproxy-contact contact='{{ c }}'
          isOnline='{{ c.isOnline }}'
          on-contact-changed='{{ contactsChanged }}'
          mode='{{ mode }}'>
      </uproxy-contact>
    </template>

  </template>

  <script src='roster-group.js'></script>

</polymer-element>
